<script setup lang="ts">
import { provide } from "vue";

const {
  column = 3,
  labelWidth,
  labelSuffix,
  labelMinWidth,
  labelAlign,
  align,
} = defineProps<{
  title?: string | number;

  // 操作区文本，显示在右上方
  extra?: string;

  // 一行 Descriptions Item 的数量:
  column?: number;

  labelWidth?: string | number;
  labelMinWidth?: string | number;

  labelSuffix?: string;
  

  align?: "left" | "center" | "right";
  labelAlign?: "left" | "center" | "right";
}>();

provide("ByDescription", {
  basicWidth: 100 / column,
  labelMinWidth,
  labelWidth,

  labelSuffix,
  labelAlign,
  align,
});
</script>

<template>
  <div>
    <div class="flex justify-between">
      <div class="flex-auto">{{ title }}</div>
      <div class="flex-none">
        <slot name="extra">
          {{ extra }}
        </slot>
      </div>
    </div>

    <div class="flex flex-wrap">
      <slot />
    </div>
  </div>
</template>
